<template>
  <div class="screen dark-page">
    <el-container>
      <el-header class="header">
        <el-row>
          <el-col :span="8">智能运行辅助系统</el-col>

          <el-col :span="2">
            <span class="dropdownLink"> 首页 </span>
          </el-col>

          <el-col :span="2">
            <el-dropdown @command="changeComponents">
              <span class="el-dropdown-link"> 健康分析 </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>健康评价</el-dropdown-item>
                <el-dropdown-item>归档分析</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>

          <el-col :span="2"
            ><el-dropdown @command="changeComponents">
              <span class="el-dropdown-link"> 运行分析 </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="GuoLuChaoWen"
                  >锅炉超温统计</el-dropdown-item
                >
                <el-dropdown-item>壁温超温统计</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown></el-col
          >

          <el-col :span="2"
            ><el-dropdown @command="changeComponents">
              <span class="el-dropdown-link"> 环保运行 </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="DianChuChen">电除尘</el-dropdown-item>
                <el-dropdown-item>脱硫参数</el-dropdown-item>
                <el-dropdown-item>灰斗及输灰</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown></el-col
          >
          <el-col :span="2"
            ><el-dropdown>
              <span class="el-dropdown-link"> 集控运行 </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>锅炉参数</el-dropdown-item>
                <el-dropdown-item>汽机参数</el-dropdown-item>
                <el-dropdown-item>电气参数</el-dropdown-item>
                <el-dropdown-item>发电机温度</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown></el-col
          >
          <el-col :span="2"
            ><el-dropdown>
              <span class="el-dropdown-link"> 化学运行 </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>制水系统</el-dropdown-item>
                <el-dropdown-item>精处理设备</el-dropdown-item>
                <el-dropdown-item>汽水取样</el-dropdown-item>
                <el-dropdown-item>加氧系统</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown></el-col
          >
          <el-col :span="2">
            <span class="dropdownLink"> 个性化报警 </span>
          </el-col>
          <el-col :span="2"
            ><el-dropdown>
              <span class="el-dropdown-link"> 系统管理 </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>用户管理</el-dropdown-item>
                <el-dropdown-item>角色管理</el-dropdown-item>
                <el-dropdown-item>预警参数配置</el-dropdown-item>
                <el-dropdown-item>知识库管理</el-dropdown-item>
                <el-dropdown-item>日志管理</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown></el-col
          >
        </el-row>
      </el-header>
      <el-main>
        <components
          :is="currentComponents"
          @changeComponents="changeComponents"
        ></components>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// 锅炉超温统计
import GuoLuChaoWen from './GuoLuChaoWen'
// 免考记录
import MianKaoJiLu from './MianKaoJiLu'
// 电除尘
import DianChuChen from './DianChuChen'
export default {
  components: { GuoLuChaoWen, MianKaoJiLu, DianChuChen },
  data () {
    return {
      showModel: 1,
      currentComponents: 'DianChuChen'
    }
  },
  methods: {
    changeComponents (command) {
      // console.log(command)
      this.currentComponents = command
    }
  }
}
</script>

<style lang="scss" >
@import "@/assets/styles/dark.scss";
$primary-color: #409eec;
$bgc-color: #041b40;
$title-color: #2e5185;
.screen {
  font-size: 2vh;
  color: white;
  background-color: $bgc-color;
  min-height: 100vh;
  height: 100%;
  .header {
    background-color: #001529;
    line-height: 60px;
  }
  .tag {
    float: right;
  }
}
.dropdownLink {
  color: #606266;
  font-size: 14px;
}
</style>
